<template>
<div class="bigbox">
  <img :src="playlist.coverImgUrl" alt="" class="beijingimg">
<el-menu
    :default-active="activeIndex"
    class="el-menu-demo5"
    mode="horizontal"
    :ellipsis="false"

    @select="handleSelect"
  >
  <el-menu-item index="0" @click="$router.go(-1)">
  <img src="../../image/fanhui.png"  class="logo">
  </el-menu-item>
    <el-menu-item index="1">歌单</el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="2">
    <img src="../../image/soushuo.png"  class="logo2">
    </el-menu-item>
    <el-menu-item index="3">
     <img src="../../image/liebiao.png"  class="logo">
    </el-menu-item>
  </el-menu>
   <div class="box2">
    <div  class="tupaian">
    <img :src="playlist.coverImgUrl" alt="" class="soutu">
    </div>
    <div class="box3">
      <div class="name1">
     {{playlist.name}}
      </div>
      <div class="tags">
      {{playlist.tags}}
     </div>
     <div class="information-title ">
      {{playlist.description}}
     </div> 
    </div>
   </div>
</div>
</template>
<script>
export default {
    setup(props) {
        console.log(props);
    },
    props:['playlist']
}
</script>
<style>
.bigbox{
    position: relative;
    width: 75%;
   /* border: 2px solid #af9c9c; */
    margin-left: auto;
    margin-right: auto;
  height:400px;
}
.flex-grow {
  flex-grow: 1;
}
.logo{
  width: 60px;
  height: 60px;
}
.logo2{
    margin-top: 4px;
    width: 50px;
  height: 50px;
}
.beijingimg{
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    filter: blur(12px);
}
.el-menu-demo5{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
   background-color:rgba(255, 244, 244, 0.2);
}
.soutu{
  margin-top: 30px;
    width: 249px;
    height: 249px;
}
.box2{
width: 100%;
  margin-left: 100px;
  display: flex;
}
.box3{
  margin-left: 100px;
  float: none;
  width: 50%;
}
.tupian{
  width: 50%;
}
.name1{
  margin-top: 20px;
  font-size: 25px;
  color: black;
}
.tags{
   margin-top: 100px;
}
.information-title {
   color: #0b0b0b;
  font-size: 15px;
  height: 100px;
  width: 100%;   /*一定要设置宽度，或者元素内含的百分比*/
  overflow:hidden; /*溢出的部分隐藏*/
  /* white-space: nowrap;  */
  text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
}
</style>